iT邦幫忙

2022 iThome 鐵人賽

DAY 13
1
自我挑戰組

你也對開始使用typescript感到無力嗎?我也是 - 30天初探typescript系列 第 13

第13天!不用遊樂場了,在本地架設環境吧!

  • 分享至 

  • xImage
  •  

之所以放在這麼多天後才來講架設環境這個題目,是因為我覺得比起架設環境,不如直接來用用看TypeScript,對這個工具會有更快更直接的了解,但,該來的還是躲不掉,架設環境一向是比開發還來得麻煩的一件事,我們總不可能都在playground上使用TypeScript吧(畢竟還是要幫客戶做專案),那我們就來動手吧。

首先

先新建一個資料夾吧,我選擇在桌面上創立一個typescript-test的資料夾
你可以使用終端機,確定自己已經在desktop(或想要的路徑上)後,輸入mkdir typescript-test

接著,我們再來初始化一個專案(產生package.json)吧!
這邊我選擇使用yarn,你習慣的話也能用npm,在這邊的指令都差不多:

yarn init -y

-y就是看你要不要對所有他所問的問題默認為"是",他會問你的問題是:

  • 你這個專案的名稱要叫什麼?(默認為資料夾名稱)
  • 第一版的版號要叫什麼?(默認為1.0.0)
  • 對這個專案的敘述?(默認為空)
  • 進入點為何?(就是用來開啟這個專案的檔案是什麼,默認叫做index.js
  • 這個專案的repository(好像翻譯叫倉儲?就是我們習慣放在GitHub上的repo)連結?
  • 作者是誰?
  • 有沒有MIT授權條款?
  • 是否要將此專案設為私人?

當上述問題全部都答完後,你會看到

success Saved package.json
Done in 幾秒

接著就會看到package.json已成功的創立,如果你剛剛有加上-y,那麼我們的package.json的內容會長這樣:

{
  "name": "typescript-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

好,接下來就讓我們來安裝TypeScript吧!因為TypeScript只有在開發時會用到,所以我們理所當然的會用-D這個flag來安裝他,讓他只存在於devDependencies

yarn add typescript -D

注意這邊,我在實作這步時,常常會忘記改成大寫,變成-d,這樣就會將TypeScript安裝到dependencies了。dependencies跟devDependencies的差別就在,dependencies內的套件會使用於production環境,而devDependencies則只使用於開發環境,所以不要裝錯地方了。
(除了寫-D,也可以寫成--dev。)

做完這步,就能看到我們的package.json多出了這幾行:

  "devDependencies": {
    "typescript": "^4.8.4"
    //由於我們剛剛沒有限定typescript的版本,所以會以最新的為主
    //你執行同樣指令時若不是4.8.4也不用太在意
  }

我們也順便安裝晚點會用到的套件:tsc-watch,一樣用-D的方式將它安裝。
這套件是為了方便我們等等不用一直輸入指令執行編譯,而能讓我們按下儲存就執行TypeScript的編譯。

接下來,我們還需要有個typescript的設定檔,名字會叫做tsconfig.json,至於該怎麼產出來?你可以在根目錄直接新創一個tsconfig.json,然後自己輸入想要用的設定。或者透過終端機輸入npx tsc --init,這樣就能自動幫你產出一個設定檔了。如果你是透過指令產出設定檔,請一定要點進去看看,裡面非常精彩。內部有個compilerOptions(編譯器選項),裡面有超多選項,預設下都先幫你關起來,只打開其中幾個讓你使用,像是要編譯的版本為何(預設是es2016)、module要用什麼(預設是commonjs)...等等的,你也可以試著刪除看看那些value:

{
    "compilerOptions":{
        "target":""
        //當你將預設的es2016給刪除,並將游標停留在雙引號中間時
        //編輯器會提示你有哪些版本可以使用!
    }
}

而這邊我們先簡單創建以下內容就好:

{
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

意思就是,我們在編譯時要將程式碼編譯成es2020的語法、我們要從src資料夾去處理.ts檔、並將編譯後的結果輸出到dist資料夾(distribution的意思)。

那我們就快點建立一個src資料夾吧,創立後,在裡面建立一個index.ts,表示這是一個TypeScript檔案。並在index.ts裡面輸入以下code:

function sayHi(name: string): string {
  return "Hi, " + name
}

console.log(sayHi("John"))

我們有了合格的TypeScript程式碼後,便能試試看編譯會變怎樣了!

(不管你有沒有創建dist資料夾),在終端機輸入npx tsc,便會自動將src裡面的ts檔編譯、放進dist資料夾(資料夾不存在就會自動幫你創立)。

此時dist資料夾內就會看到一個index.js檔案,注意,是js檔唷!代表已經編譯好了,內容會長這樣:

function sayHi(name) {
    return "Hi, " + name;
}
console.log(sayHi("John"));

嘿沒錯,就是看起來平凡無奇JavaScript程式碼!我們終於完成了!
但如果每次都要輸入一次npx tsc有點累,我們就用剛剛安裝過的tsc-watch套件來幫助我們吧。
在終端機輸入npx tsc -watch,就能讓我們每次按下儲存時,自動幫我們編譯一次,省去不少麻煩!

輸入後,你會看到下列文字出現在終端機中

[下午9:09:44] Starting compilation in watch mode...

[下午9:09:45] Found 0 errors. Watching for file changes.

代表他正監控著你資料夾內有沒有檔案被變動了,有變動就幫你編譯一次!
於是我們這樣就順利架設了一個能跑TypeScript程式碼的環境了!

明天再來看看設定檔內有什麼能動、什麼該動的吧,我們先前有提過一個屬性了,你可以往前翻一下,看能不能找到那個東西是什麼。


上一篇
第12天!你有發現我們一直在限縮型別嗎?
下一篇
第14天!來看看TypeScript的設定檔(tsconfig.json)
系列文
你也對開始使用typescript感到無力嗎?我也是 - 30天初探typescript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
DL
iT邦新手 5 級 ‧ 2023-05-12 10:05:27

這篇有學習到以前未知的東西!感謝!

Lin Chen iT邦新手 4 級 ‧ 2023-05-12 10:06:15 檢舉

謝謝你的回覆,有稍微幫到你真的是太好了

我要留言

立即登入留言